<template>
  <div class="relative animate-from-right">              
    <div>
      <h2 class="text-[30px] font-bold">忘记密码？🤦🏻‍♂️</h2>
      <p class="text-[14px]  --el-text-color-primary mt-[10px] mb-[30px]">输入您的电子邮件，我们将向您发送重置密码的连接</p>
    </div>
      
  
    <el-form
        ref="ruleFormRef"
        :model="ruleForm"
        status-icon
        :rules="rules"
        label-width="auto"
        size="large"
    >
        <el-form-item label="" prop="email">
          <el-input v-model="ruleForm.email" placeholder="example@example.com"/>
        </el-form-item>
    </el-form>
            <el-button type="primary" class="w-full" @click="submit">发送重置链接</el-button>
            <el-button type="default" class="w-full mt-[15px] !ml-[0]" @click="router.go(-1)">返回</el-button>
     
  </div>
</template>

<script setup lang='ts'>

let email=ref('')
/**路由跳转**/
const router =useRouter()
const goPage=(path:any)=>{
  router.push(path)
}


import type {FormRules} from 'element-plus'
/**获取form**/
const ruleFormRef = ref()
/**提交数据**/
const ruleForm = reactive({
 email: '',
})


 
 
 
 
/**邮箱验证函数**/
const emailValidator= (rule: any, value: any, callback: any)=>{    
  const re = /^[^\s@\u4e00-\u9fa5]+@[^\s@]+\.[^\s@]+$/;
  if (!re.test(value)) {
    //表单底部显示的错误信息
    callback(new Error('请输入正确的邮箱地址'));
  }else{
    callback()
  }
}


/**邮箱验证**/
const rules = reactive<FormRules<typeof ruleForm>>({
  email: [
    { required: true, message: '请输入邮箱地址', trigger: 'blur' },
    //{ type: 'email', message: '请输入正确的邮箱地址', trigger: ['blur', 'change'] },
    { validator:emailValidator, trigger: ['blur','change'] }
  ],
})
/**提交按钮**/
const submit = () => {
  ruleFormRef.value.validate((valid:any) => {
    if (valid) {
      ElMessage.success('邮箱格式正确');
      // 这里可以调用API发送验证邮件
    } else {
      ElMessage.error('请填写正确的邮箱地址');
      return false;
    }
  });
};


</script>

<style scoped lang='scss'>

</style>